<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车辆违章查询</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <form id="form" action="/search/" method="POST">
        {% csrf_token %}
        <input type="hidden" name="page" value="{{ page_obj.number }}">
        <input type="hidden" name="total" value="{{ total_page }}">
        <input type="text" name="carno" value="{{ carno }}" placeholder="请输入车牌号或车主姓名">
        <input type="submit" value="查询">
    </form>
    <hr>
    {% if page_obj.object_list %}
    <div class="data">
        <table>
            <tr>
                <th>车牌</th>
                <th>车主</th>
                <th>时间</th>
                <th>地点</th>
                <th>违章原因</th>
                <th>触发方式</th>
                <th>是否受理</th>
                <th>操作</th>
            </tr>
            {% for record in page_obj.object_list %}
            <tr>
                <td>{{ record.car.carno }}</td>
                <td>{{ record.car.owner }}</td>
                <td>{{ record.offend_time }}</td>
                <td>{{ record.offend_place }}</td>
                <td>{{ record.offend_reason }}</td>
                <td>{{ record.punish }}</td>
                <td>{{ record.dealed | yesno:'已受理,未受理' }}</td>
                <td class="handler">
                    {% if not record.dealed %}
                    <a href="/handle/?rno={{ record.no }}">受理</a>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </table>
    </div>
    <div class="paginator">
        <button id="prev" {% if not page_obj.has_previous %}disabled{% endif %}>上一页</button>&nbsp;&nbsp;
        第{{ current_page }}页 / 共{{ total_page }}页&nbsp;&nbsp;
        <button id="next" {% if not page_obj.has_next %}disabled{% endif %}>下一页</button>
    </div>
    {% elif searched %}
    <h2>没有查询到违章记录!</h2>
    {% endif %}
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
    $(() => {
        let currentPage = parseInt($('input[name=page]').val())
        let totalPage = parseInt($('input[name=total]').val())
        $('#prev').on('click', (evt) => {
            if (currentPage > 1) {
                $('input[name=page]').val(currentPage - 1)
                $('#form').get(0).submit()
            }
        })
        $('#next').on('click', (evt) => {
            if (currentPage < totalPage) {
                $('input[name=page]').val(currentPage + 1)
                $('#form').get(0).submit()
            }
        })
        $('input[name=carno]').on('change', (evt) => {
            $('input[name=page]').val(1)
            $('input[name=total]').val(0)
        })
        $('.handler>a').on('click', (evt) => {
            evt.preventDefault()
            let url = $(evt.target).attr('href')
            $.getJSON(url, (jsonObj) => {
                if (jsonObj.code == 100) {
                    $(evt.target).parent().prev().text('已受理')
                    $(evt.target).remove()
                } else {
                    alert(jsonObj.message)
                }
            })
        })
    })
    </script>
</body>
</html>